
import marked from 'marked'
import hljs from "highlight.js";
import 'highlight.js/styles/monokai-sublime.css';
import Tocify from './tocify.tsx'



const renderer = new marked.Renderer();

// 主题内容
marked.setOptions({
  renderer: renderer,
  gfm: true,
  pedantic: false,
  sanitize: false,
  tables: true,
  breaks: false,
  smartLists: true,
  smartypants: false,
  highlight: function (code) {
    return hljs.highlightAuto(code).value;
  }
});

// nav bar
const tocify = new Tocify()
tocify.reset()
renderer.heading = function (text, level, raw) {
  const anchor = tocify.add(text, level);
  return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
};


const MD = (content) => {
  let html = marked(content)
  return {
    html,
    nav: tocify && tocify.render()
  }
}
export default MD

